/*************************************************************************************************
 Base styles - layout, positioning of elements. Colors, images and typography
 shouldn't appear here. Use customizable.css instead.

 Contents:
 - Layout [LAY]
    - Simple Page [SMP]
    - Header [HDR]
    - Application Menu [APM]
    - Footer [FTR]
 - Forms [FRM]
    - Listpairs [LSP]
    - Validators [VAL]
    - Buttons [BTN]
 - Actions [ACS]
    - Action Icons [AIC]
 - Tables [TBL]
    - Table Items [TIT]
    - Table Footer [TFT]
 - Floated Blocks [FBL]
 - Modal Pop-ups [MPU]
 - Info [IFO]
 - Tabs [TBS]
 - Wrapper [WRP]
 - Notes [NTS]
 - Theme Selector [TSL]
 - Tooltips [TLT]
 - Date Picker [DAP]
 - Autocomplete [ATC]
 - Page Approval [PAP]
 - Proof [PRF]
    - Proof Toolbar [PRT]
    - Proof Sidebar [PRS]
    - Proof Rulers [PRR]
 - Progress, overlay and shadow [POS]
 - Misc [MSC]

*************************************************************************************************/

body
{
	margin-bottom: 2em;
	background-repeat: repeat-x;
}

/* reset browser margins */
body, html, form { margin: 0; padding: 0; }

/* main heading containing company name / logo */
h1 
{
	display: block;
	float: left;
	margin: .7em 0 .7em .5em;
}

/* page name */
h2 { margin: .6em .7em; }

/* page subsection heading */
h3
{
	margin: 2.5em 0 1em 0;
	padding: .5em 0 0 .3em;
	background-repeat: no-repeat;
}

ul { margin-left: 0; padding-left: 2em; }
li
{
	padding-left: 1em;
	margin-left: 0;
	list-style: none;
	background-repeat: no-repeat;
	background-position: 0 .5em;
}

p {	margin: 1em 0; }

hr { margin: 2em auto; border: none; height: 1px; }

img { border: 0; }

/* cleaner for cleaning floats */
.cleaner
{
	clear: both;
	font-size: 0;
	height: 0;
	width: 0;
	line-height: 0;
	margin: 0;
	padding: 0;
}

/* image replacement */
a.target-note, a.make-private-note, a.make-public-note, a.reply-to-note, a.delete-note, a.edit-note, a.hide-note-replies, a.show-note-replies,
a.hide-subreports, a.show-subreports,
.job a.preview span, div.details a, a.action, a.info, a.checklist, a.edit, a.delete, a.unlock, a.members_permission, a.user_permission, a.password,
a.employees, a.restore, a.members, a.clone, a.rename, span.true, span.false, span.true-inherited,
a.notes, a.history, a.datafile, a.attachments, a.data-file, a.download,
.pager a.prev, .pager a.next, .pager span.noprev, .pager span.nonext,
div#copyright span.separator,
.progress, #progress,
div.listpair a.change, a.collapse, div.listpair span.empty,
th.filetype span, th.version>a>span, th.deadline>a>span,
thead span.asc, thead span.desc,
span.filetype,
div.empty, div.unknown, div.nopreview,
.panel a span, .panel .switch span, #sidebar ul.tabs li a span
{
	display: block;
	overflow: hidden;
	text-indent: -5000px;
	white-space: nowrap;
	background-repeat: no-repeat;
}

span.active-user, span.inactive-user
{
	display: block;
	overflow: hidden;
	text-indent: 0px;
	white-space: nowrap;
	background-repeat: no-repeat;
	padding-left: 20px;
}


/*************************************************************************************************/
/* Layout [LAY] - main layout parts positions and styles. See masterpages
   for more details. */

/* ordinary page */
.page
{
	width: 90%;
	min-width: 960px;
	margin: 0 auto;
	padding: 0 0 10px 0;
	text-align: left;
}

/* header container */
.header 
{
	/* surround floated content */
	overflow: auto;
	/* avoid scrollbar in FireFox when links outline is displayed */	
	padding-right: 1px;
}

/* application menu */
dl#menu
{
	width: 225px;
	margin-top: 1.3em;
	/* leave all place to the floated content */
	margin-right: -225px;
	float: left;
}

/* container for the page content */
.content
{
	/* padding around content */
	padding: 0 2em 2em 25px;
	/* left margin for menu */
	margin: 0 0 0 225px;
	/* Page content has to be floated to establish a new block formatting context,
	   so we can use clear:left without worying about left-floated menu.
	   See CSS 2.1 specification for more info:
	   http://www.w3.org/TR/CSS21/visuren.html#block-formatting */
	float: left;
}


/*************************************************************************************************/
/* Simple Page [SMP] - page without left menu and header toolbox (login,
   logout, error pages. */

.simple-page h1 { float: none; }

.simple-page .header { border-bottom: 1px solid; }

.simple-page .content
{
	float: left;
	padding: 0 0 0 10px;
	margin: 0;
}

.simple-page .left-box { float: left; min-width: 250px; }
.simple-page .right-box { float: right; }



/*************************************************************************************************/
/* Header [HDR] - header with logo, top menu and search (header toolbox). */

/* toolbox in header containing user information and menu */
div#header-toolbox { float: right; }

/* some space between toolbox parts */
div#header-toolbox div,
div#header-toolbox ul
{
	margin-top: 1em;
	text-align: right;
}

div#search input
{
	margin-left: .5em;
}

/* menu container with fixed height (no need for clearing) */
div#header-toolbox ul
{
	margin: 0;
	padding: 0;
	height: 26px;
	list-style: none;
}

/* menu item */
div#header-toolbox li
{
	margin: 0 0 0 5px;
	padding: 0;
	padding-top: 0;
	margin-top: 0;
	float: right;
	display: block;
	background-repeat: no-repeat;
	background-position: left bottom;
}

div#header-toolbox li a,
div#header-toolbox li a.last
{
	margin: 0;
	padding: .3em 1em .1em 1em;
	display: block;
	height: 23px;
	background-repeat: no-repeat;
	background-position: right bottom;
	text-align: center;
}
div#header-toolbox li a:hover { padding-top: .6em; }

/* breadcrumbs */
ul#breadcrumbs
{
	display: block;
	clear: left;
	margin: .5em 0 0 .5em;
	padding: 0;
}
ul#breadcrumbs li
{
	display: inline;
	padding: 0 1.7em 0 0;
	margin: 0 1em 0 0;
	background-repeat: no-repeat;
	background-position: right center;
}
ul#breadcrumbs li.last { background-image: none; }



/*************************************************************************************************/
/* Application Menu [APM] */

/* application menu part heading */
dl#menu dt
{
	margin: 0 0 .4em 10px;
	padding: 0 0 0 8px;
	background-repeat: no-repeat;
	background-position: 0 center;
}

/* application menu part */
dl#menu dd { margin: 0 0 1.5em 0; }

/* application menu link */
/* we must set also a:hover and a:visited for IE */
dl#menu a, dl#menu a:hover, dl#menu a:visited
{
	display: block;
	padding: 10px 8px;
	margin-bottom: -1px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}



/*************************************************************************************************/
/* Footer [FTR] */

/* footer div style */
div.footer
{
	text-align: left;
	/* footer must have same width as page - in future footer should be contained in the page */
	width: 90%;
	min-width: 960px;
	padding-top: .7em;
	margin: 0 auto 2em auto;
	clear: both;
	border-top: 1px solid;
}

/* surround floated content */
div#copyright
{
	overflow: auto;
	padding-left: 1.2em;
}

/* spans in copyright are blocks floated left (because of image replacement technique) */
div#copyright span
{
	display: block;
	float: left;
}

/* copyright separator */
div#copyright span.separator
{
	margin-left: .7em;
	margin-right: .7em;
	height: 9px;
	width: 1px;
	margin-top: .4em;
}



/*************************************************************************************************/
/* Forms [FRM] */

/* make some place for form-part padding */
form { margin-left: 1em; }
form.inline { margin-left: 0 }

/* field wrapper */
.field { margin: 1em 0; }
.field input { float: left; }

label.top-label { display: block; white-space: nowrap; }

/* input sizes (for nice design of inputs, they cannot have any size by developer's choice */
input.xsmall { width: 3em; }
input.small { width: 5em; }
input.large { width: 20em; }
input.xlarge { width: 30em; }

select.small { width: 13em; }

fieldset 
{
	border: none;
	padding: 0 1em;
	margin: 1.5em 0 1em;
	border-top: 1px solid;
}
legend { margin: -0.5em 0; }

/* part of the form or content of the tab */
div.form-part
{
	margin: 0;
	/* get away the form padding, I have my own */
	margin-left: -1em;
	padding: 0 1em .6em 1em;
	min-width: 30em;
	/*min-height: 20em;*/
	border: 1px solid;
}



/*************************************************************************************************/
/* Listpairs [LSP] */

/* table containing lists and labels */
.listpair table {
	border-collapse: collapse;
}
.listpair table th, 
.listpair table td
{
	vertical-align: top; 
	text-align: left;
	border-style: none;
	padding: 0 1em 0 0;
}
.listpair table th
{
	padding-right: 24px; /* kvuli ikonce change/collapse v th, aby label nevybihal do bocniho th */
}

/* lists */
.listpair ul
{
	margin: 0;
	padding: 0;
	border-width: 1px;
	border-style: solid;
	padding: .2em;
}
.listpair ul li
{
	margin: 0;
	padding: 0 .5em 0 .2em;
	background-image: none;
	white-space: nowrap;
}
.listpair ul.selected,
.listpair ul.possible
{
	min-width: 20em;
	height: 20em;
	overflow: auto;
}
.listpair ul.possible { padding-right: 1.5em; }

/* draggable element */
.draggable { cursor: move; }
.listpair span.draggable span.id { display: none }
.listpair span.draggable span.sortNo { display: none }

/* manipulation icons */
.listpair a.manip
{
	display: block;
	height: 12px;
	width: 12px;
	float: left;
	margin: 0.2em .5em 0 0;
}

/* preview */
.listpair .preview ul, .listpair span.empty
{ float: left; cursor: pointer; }
.listpair .preview ul span { display:none; }
.listpair .preview ul span.preview { display:inline; }
.listpair .preview ul a.manip { display:none; }
.listpair span.empty{ border-width: 1px; border-style: solid; width: 7em;}
.listpair a.change, .listpair a.collapse
{
	width: 20px;
	height: 16px;
	background-position: left top;
	background-repeat: no-repeat;
	float: left;
}
.listpair a.collapse { background-position: left bottom; }

/* dragged element */
.listpair span.ui-draggable-dragging
{
	padding: .5em;
	border-width: 1px;
	border-style: dotted;
}

.listpair.readonly a.change { display:none; }
.listpair.readonly .preview ul, .listpair.readonly span.empty
{ cursor: auto; }
.listpair.write a.collapse { display:none; }

.listpair .preview span.empty,
.listpair .preview ul
{
    background-color:#fff;
}


/*************************************************************************************************/
/* Validators [VAL] */

/* omit this element later by using errorPlacement callback from the jQuery validate plugin
   http://docs.jquery.com/Plugins/Validation/validate */
/* the validator container (used by jquery.validate to inject validator) */
.validator
{
	/* move it a little bit top (approximately the label.error padding size)
	   to avoid enlarging the form wrapper */
	/* cannot negative margin-top, it couses troubles in fieldsets in IE */
	position: relative;
	top: -0.65em;
}

/* validator (field validator & validator messages under the form) */
label.error, span.error
{
	display: block;
	line-height: normal;
	padding: .5em;
	margin: .7em;
	border: 1px solid;
}

/* validator messages under the form */
span.error { margin-left: 0 }

/* field validator (next to the field */
label.error
{
	z-index: 100;
	position: relative;
}

/* field validator like talking bubble needs the element to place the arrow */
.validator label span { position: absolute; }

/* field validator placement */
.validator-bottom { clear: both; }
.validator-bottom label
{
	margin: 15px 0 0 0; /* 15 px for the speaking bubble sign */
	float: left; /* float left to wrap the text closely */
}
.validator-bottom label span
{
	width: 9px;
	height: 10px;
	top: -10px;
	left: 15px;
	background-repeat: no-repeat;
}

.validator-right { float: left; }
.validator-right label { margin: 0 0 0 15px; }
.validator-right label span
{
	width: 10px;
	height: 9px;
	top: .7em;
	left: -10px;
	background-repeat: no-repeat;
}



/*************************************************************************************************/
/* Buttons [BTN] */

/* buttons wrapper */
.buttons
{
	clear: both;
	margin: 1em 0;
}

.buttons input 
{
	margin-right: .2em;
	padding: 3px 5px;
	/* IE fix */
	overflow: visible;
}

.buttons a { padding: 6px 5px; display: inline-block; }

/* link with more space and hover effect */
#modal .buttons a { padding: .5em; }



/*************************************************************************************************/
/* Actions [ACS] */

ul.actions
{
	margin: 0;
	padding: 0;
	list-style: none;
    /* wrap ul around icons - needed for IE else tables are broken */
	overflow: auto;
}

ul.actions li
{
	margin: 0;
	padding: 0;
	background-image: none;
	float: left;
}

ul.actions li a { display: block; padding: .5em; }



/*************************************************************************************************/
/* Action Icons [AIC] */

a.action,
a.info, a.checklist, a.edit, a.delete, a.unlock, a.password, a.members_permission,
a.user_permission, a.employees, a.restore, a.clone, a.rename, a.members,
a.notes, a.history, a.datafile, a.attachments, a.data-file, a.download
{
	float: left;
	width: 24px;
	height: 24px;
	margin: 2px 1px;
	/* want to override the strenght of the "ul.actions li a" selector */
	padding: 0 !important;
	background-position: 4px 4px;
}

/* Action on info page */
a.info-attributes 
{
	/* want to override the strenght of the "ul.actions li a" selector */
	height: 16px;
	margin: 0px 0px;
	background-position: 4px 0px;
}


/*************************************************************************************************/
/* Tables [TBL] */

table.data
{
	border-collapse: collapse;
	min-width: 400px;
}

/* table paddings and borders */
table.data td, table.data th
{
	padding: .3em .5em;
	border: 1px solid;
}

/* stretch link to the whole heading column (move padding from the column to the link) */
table.data thead th { padding: 0; text-align: center; }
table.data thead th>a, table.data thead th>span
{
	white-space: nowrap;
	display: block;
	padding: .5em .6em;
	vertical-align: middle;
}

/* th with tow column headings */
table.data thead th.two a { padding-top: .2em; padding-bottom: 0; } /* both headings */
table.data thead th.two a~a { padding-top: 0; padding-bottom: .2em; } /* bottom heading */

/* addresses are often too long and make tables wide */
th.address { width: 20em; }

/* image headings */
th.filetype span, th.version>a>span, th.deadline>a>span
{
	display: inline-block;
	width: 16px;
	background-position: center center;
	vertical-align: middle;
}

/* sorting icons containers (spans contains also the column heading text ) */
th>a>span.asc, th>a>span.desc
{
	display: inline-block;
	width: 7px;
	padding-left: .4em;
	height: 8px;
	background-repeat: no-repeat;
	background-position: right center;
	vertical-align: middle;
}

/* numbers in tables */
td.number, th.number
{
	text-align: right;
}

/*************************************************************************************************/
/* Table Items [TIT] */

/* margin between two values in one colum */
td.two div { margin-bottom: .5em; }
td.two div~div { margin-bottom: 0; }

/* true & false icons */
span.true, span.false, span.true-inherited
{
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}

/* active/inactive-user icons */
span.active-user, span.inactive-user
{
	height: 16px;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}


/* icons for showing and hiding subreports */
a.hide-subreports,
a.show-subreports
{
	margin: 4px;
	left: 0;
	bottom: 8px;
	width: 9px;
	height: 9px;
	outline-style: none;
}

/* small link (only number) */
a.counter
{
	padding: .3em 2.5em;
}

/* job column formatting */
td.job { text-align: center; max-width: 205px; }
td.job a { display: block; }
td.job img { display: block; margin: .2em auto; border: 1px solid; }
div.empty, div.unknown, div.nopreview { margin: .2em auto; width: 32px; height: 32px; }

ul.workflow
{
	clear: both;
	margin-top: 5px;
	padding: 5px 1px 1px 1px; /* 1px to avoid scrollbars when outline is displayed */
}

span.filetype
{
	width: 16px;
	height: 16px;
	margin: 0 auto;
	display: inline-block;
	vertical-align: top;
}

td.version, td.deadline, td.numberOfCompanies, td.numberOfJobs
{
	text-align: right; padding-right: 1em;
}

/* reports table */
th.report-first span, td.report-second span, td.report-third span, td.report-description span  
{
	display:block; float:left;
}
table.data td.report-second
{
	padding-left: 20px;
}
table.data td.report-third
{
	padding-left: 60px;
}

/* reports header table */
table.report-header span
{
	float:left; 
	margin-top:4px;
}

table.report-header td
{
	padding-right:20px;
}

/*************************************************************************************************/
/* Table Footer [TFT] */

/* remove padding to stretch links to full height of row */
table.data tfoot th { padding: 0; text-align: left; }

/* pager = pages list and next/prev links */
.pager { float: left; }

/* container for row count and record count */
.row-count
{
	float: right;
	text-align: right;
	/* add padding removed from the table cell */
	padding: 5px;
}

.pager a, .pager span
{
	display: block;
	float: left;
	padding: 5px;
}

.pager a.prev, .pager a.next, .pager span.noprev, .pager span.nonext
{
	float: left;
	width: 16px;
	height: 16px;
	background-position: 5px 5px;
}



/***************************************************************************************************/
/* Proof [PRF] */

/* everything is absolute positioned from JavaScript code to fit window size */
#proof, #sidebar, #toolbar, #viewport { position: absolute; }

/* show scrollbars on document when bigger then viewport */
#viewport { overflow: auto; }
#viewport.dragged { cursor: move; }

/* allow to position notes, foldmarks & found items relative to document image */
#document { position: relative; }

#proof img { display: block }
#proof { overflow: hidden; }
#proof div.selection-active { cursor: crosshair;}

/* foldmarks */
.vertical-foldmark, .horizontal-foldmark { position: absolute; }
.vertical-foldmark { top: 0; bottom: 0; width: 1px; }
.horizontal-foldmark { left: 0; right: 0; height: 1px; }

/* rectangle areas */
.found-item, .current-found-item,
.note-area, .current-note-area, .note-selection, .note-label,
.variable-area
{
	border-width: 1px;
	border-style: solid;
}
.note-selection { border-style: dotted; }

/* spot note labels */
.note-area.point, .current-note-area.point, .note-label.point
{
	border-width: 0px;
	background-color: transparent;
}


/***************************************************************************************************/
/* Proof Toolbar [PRT] */

#toolbar
{
	overflow: hidden;
	border-style: solid;
	vertical-align: middle;
}
#toolbar span { display: block; float: left }

/* toolbar panel containing tools */
.panel
{
	display: block;
	height: 20px;
	padding: 0 5px;
	margin: 6px 0;
}
#toolbar .panel
{
	float: left;
	/* overlap panel separators (borders) */
	margin-right: -1px;
	/* panel separators */
	border-width: 0 1px;
	border-style: solid;
}
#toolbar .panel#exit-panel { float: right; }
#toolbar .panel#logout-panel { float: right; }


#toolbar label { display: none; }
#toolbar select, #toolbar input { display: block; float: left; }
#toolbar select { max-width: 300px; }
#toolbar a { outline: none; }

/* icons wrapper (holds the 'active' background image) */
.panel a, .panel .switch
{
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	cursor: pointer;
	padding: 2px;
	margin: 1px;
	position: relative;
}
/* icon */
.panel a span, .panel .switch span
{
	/* absolute - there is some error in FF with displaying .switch span inside .switch */
	position: absolute;
	left: 2px;
	top: 2px;
	display: block;
	width: 16px;
	height: 16px;
}
/* disabled icon */
.panel a.disabled, .panel .switch.disabled { cursor: default; }
.panel a.disabled span, .panel .switch.disabled span { background-position: left bottom; }



/***************************************************************************************************/
/* Proof Sidebar [PRS] */

#sidebar
{
	border-left: 1px solid;
	/* hide overflow, scrollbars appears inside tabs if needed */
	overflow: hidden;
}

/* jQuery UI - resizable*/
#sidebar .ui-resizable { position: relative;}
#sidebar .ui-resizable-handle 
{
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	font-size: 0.1px;
	z-index: 100;
	display: block;
	height: 100%;
	overflow: hidden;
	cursor: w-resize;
	width: 4px;
	top: 0px;
	left: 0px;
	bottom: 0px;
	border-left: 1px solid rgb(222, 222, 222);
}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }

/* sidebar heading */
#sidebar h2 { margin: 1.2em 1.2em .5em 1.5em; }
#sidebar #job-actions { margin: .5em 1.2em 2em 1.5em; }

/* iconic tabs */
#sidebar ul.tabs { margin-left: 1.5em; }
#sidebar ul.tabs li { margin: 0 1px; }
#sidebar ul.tabs li a { padding: 3px 10px; }
#sidebar ul.tabs li a span { width: 16px; height: 16px; }

/* tabs content */
#sidebar div.form-part
{
	border-width: 1px 0 0 0;
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 0;
	overflow: auto;
}

/* this additional element is needed to hold right and left padding tab so we can
   use 100% width for the tab */
#sidebar div.tabcontent { padding: 1em 1.2em 1em 1.5em; }

/* there is not enough space for wide tables in sidebar */
#sidebar table.data { min-width: 0; }

/* DataView-Flat <pre> tag should not influence margin */
pre.keep-format   { margin: 0px; }

/***************************************************************************************************/
/* Proof Rulers [PRR] */

#horizontal-ruler, #vertical-ruler, #rulers-corner
{
	position: absolute;
	border-style: solid;
	font-size: 8px;
	line-height: 8px;
	/* remove text cursor on ruler numbers */
	cursor: default;
}
#rulers-corner { top: 0; left: 0; }

/* all ruler items - numbered or not */
.ruler-item { border-style: solid; }
#horizontal-ruler .ruler-item
{
	border-width: 0 0 0 1px;
	margin-left: -1px;
	height: 6px;
	margin-top: 8px;
	float: left;
}
#vertical-ruler .ruler-item
{
	border-width: 1px 0 0 0;
	margin-top: -1px;
	width: 6px;
	margin-left: 8px;
}

/* numbered & minor ruler item */
.numbered { position: relative; }
#horizontal-ruler .numbered { height: 100%; margin-top: 0; }
#vertical-ruler .numbered { width: 100%; margin-left: 0; }
#horizontal-ruler .minor { height: 4px; margin-top: 10px; }
#vertical-ruler .minor { width: 4px; margin-left: 10px; }

/* span containing number */
.numbered span
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
#vertical-ruler .numbered span { width: 1em; }



/*************************************************************************************************/
/* Floated Blocks [FBL] - Alternative to table for viewing a list of items. */

/* container for floated blocks */
ul.blocks
{
	margin: 0;
	padding: 0;
	overflow: auto;	
}

/* one block */
ul.blocks li
{
	display: block;
	float: left;
	position: relative;
	list-style: none;
	background-image: none;
	padding: 0;
	margin: 0 1em 1em 0;
	border: 1px solid;
}

/* block actions */
ul.blocks ul.actions
{
	margin: 0;
	position: absolute;
	right: 0;
	top: 5px;
	display: none;
}

/* one block action */
ul.blocks ul.actions li
{
	margin: 0;
	padding: 0;
	border: none;
}
ul.blocks ul.actions li a { padding: 0; }
/* show actions on block hover */
ul.blocks li:hover ul.actions { display: block; }

/* theme blocks */
ul li.theme
{
	width: 100px;
	padding: 10px;
	text-align: center;
	text-decoration: none;
}
ul li.theme span.name { display: block; }



/*************************************************************************************************/
/* Modal Pop-ups [MPU] */

/* the modal window style */
#modal
{
	left: 70%;
	top: 10%;
	margin-left: -30em;
	padding: 1em;
	border: 1px solid;
}

/* special modal window content styles */
#modal h2 { margin-top: 0; }
#modal .buttons
{
	text-align: center;
	margin-bottom: 0;
}

#modal em
{
	text-align: center;
	clear: both;
	display:block;
}

/* modal window with user info */
.user-info img
{
	float: left;
	margin-right: 1em;
}
.user-info table.info
{
	float: left;
}



/*************************************************************************************************/
/* Info [IFO] Readonly information - info tables, paragraphs, etc. */

/* table.info and p.info are used for displaying some object information
  (Property: value) Table is used for more properties and <p>+<b> are
  used for one property only. */
table.info, p.info { margin-bottom: 1em; margin-left: 1em; }

table.info td, table.info th { border: none; padding: .2em 0; }

/* table heading (first-column with property names) style */
table.info th
{
	vertical-align: top;
	text-align: right;
	padding-right: .5em;
	background: transparent;
}

p.info b, li.info b { padding-left: .5em; }



/*************************************************************************************************/
/* Tabs [TBS] */

/* necessary by jQuery UI tab to hide inactive tabs */
.ui-tabs .ui-tabs-hide {
	display: none;
}

ul.tabs
{
	margin: 0;
	padding: 0;
	overflow: auto;
	position: relative;
	top: 1px;
}

ul.tabs li
{
	margin: 0 0 0 1em;
	padding: 0;
	display: block;
	float: left;
	background-repeat: no-repeat;
	background-position: left top;
}

ul.tabs li a
{
	padding: .4em 0.8em;
	display: block;
	text-decoration: none;
	font-weight: bold;
	outline: none;
	background-repeat: no-repeat;
	background-position: right top;
}

/* hide container's border under selected tab */
ul.tabs li.ui-tabs-active { border-bottom: 1px solid; }



/*************************************************************************************************/
/* Wrapper [WRP] */

.wrapper
{
	position: relative;
	top: 1px;
	margin: 2em 0 0 0;
	padding: 0;
	width: 18em;
	background-repeat: no-repeat;
	background-position: right top;
}
.wrapper a
{
	display: block;
	padding: .4em 1em;
	outline: none;
	background-repeat: no-repeat;
	background-position: left top;
	text-decoration: none;
}
.wrapper.closed { border-bottom: solid 1px; }


/*************************************************************************************************/
/* Notes [NTS] */

/* notes tree - the whole tree and tree under branch */
ul.notes-tree
{
	margin: 0;
	padding: 0;
}

/* note branch - contains note and note tree if there are responses */
li.notes-branch
{
	margin: 0;
	padding: 0 0 0 2em;
	list-style: none;
	background-image: none;
}

/* notes branch directly under notes trunk are not indented */
ul.notes-trunk>li.notes-branch { padding-left: 0; }

/* note container */
div.note
{
	margin: 1em 0;
	overflow: auto;
	/* there has to be min width for notes reaching the right end of page, so page scrollbar can
	   appear instead of zero-width note (& it looks better if note is not too narrow) */
	min-width: 20em;
}

/* note header containing note info */
div.note-head
{
	padding: 0 0 .3em 30px;
	z-index: 20;
	position: relative;
	overflow: auto;
	top: 1px;
	background-repeat: no-repeat;
	background-position: 10px bottom;
}
div.note-head span
{
	display: block;
	float: left;
	padding-right: 0.5em;
}

/* do not wrap note date & time, especially in proof */
div.note-head .datetime { white-space: nowrap }

/* note body containing note text */
div.note-body
{
	padding: .4em;
	float: left;
	border: 1px solid;
}
div.note-body p
{
	margin: .5em;
}

/* span in note head containing all actions with note */
span.note-actions
{
	width: 100px;
	overflow: auto;
}

/* note actions icons */
a.target-note,
a.make-private-note,
a.make-public-note,
a.reply-to-note,
a.delete-note,
a.edit-note
{
	float: left;
	width: 16px;
	height: 16px;
	margin: 0 2px 1px 0;
	outline-style: none;
}

/* icons for showing and hiding replies */
a.hide-note-replies,
a.show-note-replies
{
	position: absolute;
	left: 0;
	bottom: 8px;
	width: 9px;
	height: 9px;
	outline-style: none;
}

/* reply & edit note (new form with texarea) style */
div.reply .note-body, div.edit-note .note-body { float: none; }
div.reply p, div.edit-note p { margin: 0; }
div.reply textarea, div.edit-note textarea
{
	min-height: 5em;
	width: 99%;
	margin: 0;
	padding: 0;
}

/* special form settings for the reply & edit note */
div.reply form, div.edit-note form { margin-left: 0; }
div.reply .buttons, div.edit-note .buttons { margin: .5em 0 0 0; }

/* new note formatting help */
div#formatting-help
{
	/* disabled for now */
	display: none;
	padding: .5em;
	width: 25em;
	position: absolute;
	left: 61%;
	margin-top: -0.5em;
	margin-bottom: 2em;
	font-size: .9em;
	line-height: normal;
	border: 1px solid;
	background-repeat: no-repeat;
	background-position: 5px 5px;
}

div#formatting-help h3
{
	margin: 0 0 .5em 20px;
	font-weight: normal;
	font-size: 1.3em;
}
div#formatting-help ul { padding-left: .5em; }



/*************************************************************************************************/
/* Theme Selector [TSL] */

/* container of theme select */
.theme-select { width: 250px; }

/* list with selected / all available themes */
.theme-select ul
{
	list-style: none;
	margin: 0 0 1em 0;
	padding: 0;
	border: 1px solid;
	border-bottom: none;
}

/* one list item with selected / available theme */
.theme-select ul li
{
	margin: 0;
	padding: 5px;
	height: 70px;
	border-bottom: 1px solid;
	cursor: pointer;
	text-align: right;
}

/* aditional info about theme */
.theme-select ul li span { display: block; }

/* image is floated left and has fixed size */
.theme-select ul img
{
	margin: 0 2em 0 0;
	width: 100px;
	height: 70px;
	float: left;
}

/* remove list style */
.theme-select ul li { background-image: none; }



/*************************************************************************************************/
/* Tooltips [TLT] */

#tooltip
{
	position: absolute;
	z-index: 300;
	line-height: normal;
	padding: .4em .5em .5em .4em;
	border: 1px solid;
}

/* tooltip heading */
#tooltip h3
{
	margin: 0 0 .5em 0;
	padding: 0;
	background-image: none;
	max-width: 50em;  /* bigger than initial 20em because of action names */
}

#tooltip .body {
	max-width: 30em;
}



/*************************************************************************************************/
/* Date Picker [DAP] */

/* datepicker field */
div.datepicker input { float: left; }
div.datepicker a { float: left; }

/* table holding date picker */
.dpTable
{
	border: 1px solid;
	text-align: center;
	border-collapse: separate;
}
.dpTable td { border: none; margin: 0; padding: 0; }


td.dpTD, td.dpDayHighlightTD, td.dpDayTD { padding: .1em .3em }

/* pointer on days */
.dpTD, .dpDayHighlightTD { cursor: pointer; }

/* border on days and highlighted day */
td.dpDayHighlightTD, td.dpDayTD { border: 1px solid; }

/* some space to center the month */
.dpTitleText { margin-left: 16px; }

/* buttons */
.dpButtonBack, .dpButtonBack2, .dpButtonNow, .dpButtonNext,.dpButtonNext2, .dpButtonClose
{
	height: 18px;
	width: 18px;
	border: 0;
	background-repeat: no-repeat;
	cursor: pointer;
	margin: 2px;
}

/* activation icon */
a.show-datepicker
{
	float: left;
	width: 16px;
	height: 16px;
	margin: .2em .1em;
}

/*************************************************************************************************/
/* Time Picker [TIP] */

/* timepicker field */
div.timepicker input { float: left; }
div.timepicker a { float: left; }

/* activation icon */
a.browse-time
{
	float: left;
	width: 16px;
	height: 16px;
	margin: .2em .1em;
}

/*************************************************************************************************/
/* Autocomplete [ATC] */

.ac_results
{
	padding: 0;
	border: 1px solid;
	overflow: hidden;
	z-index: 200;
}

.ac_results ul
{
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li
{
	margin: 0;
	padding: 2px 5px;
	cursor: default;
	display: block;
	font: menu;
	font-size: 12px;
	/* it is very important, if line-height not setted or setted in relative units scroll will be broken in firefox */
	line-height: 16px;
	overflow: hidden;
	background: none;
}



/***************************************************************************************************/
/* Page Approval [PAP] */

div.page-approval span.PendingProofMap, 
div.page-approval span.AllConfirmed, 
div.page-approval span.SomeRefused
{
	display: block;
	width: 24px;
	height: 24px;
	text-indent: -5000px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
}

div.page-approval span.PageConfirmed, 
div.page-approval span.PageRefused, 
div.page-approval span.PageNotApproved
{
	display: block;
	width: 24px;
	height: 24px;
	text-indent: -5000px;
	overflow: hidden;
	background-repeat: no-repeat;
}

div.page-approval table.header
{
	margin:1em 0 0.5em 0;
}
div.page-approval table.header td 
{
	border-style:none;
}




/*************************************************************************************************/
/* Progress, overlay and shadow [POS] */

input.with-progress { float:left; }

/* inline progress */
.progress
{
	float: left;
	width: 100%;
	height: 15px;
	margin: .2em;
	background-position: center center;
}

/* centered progress */
#progress
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-left: -16px;
	margin-top: -16px;
}

/* page overlay */
#overlay
{
	height: 100%;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 200;
	display: block;
}

/* shadow holder */
.shadow
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: -12px;
	bottom: -12px;
	z-index: -100;
}

/* shadow parts holders */
.shadow span { display: block; position: absolute; }
.shadow span.lt { top: 0; width: 10px; height: 10px; left: 0; background-position: left top; }
.shadow span.rt { top: 0; right: 0; height: 10px; left: 10px; background-position: right top; }
.shadow span.lb { top: 10px; width: 10px; bottom: 0; left: 0; background-position: left bottom; }
.shadow span.rb { top: 10px; right: 0; bottom: 0; left: 10px; background-position: right bottom; }



/*************************************************************************************************/
/* Misc [MSC] */

/* user info link */
a.user { white-space: nowrap; }

a.workflow-action
{
	text-decoration: none;
	display: inline-block;
	padding-left: 18px;
	white-space: nowrap;
	background-repeat: no-repeat;
}

/* image map with customizable areas */
img.customizable-areas
{
	display: block;
	margin: 0 0 1em 0;
	border: 1px solid;
}

/* floated images */
li.image a
{
	display: block;
	padding: .5em;
	margin: 0;
	text-decoration: none;
}
li.image img
{
	max-height: 150px;
	max-width: 150px;
}

table.form input
{
	margin: .5em;
}

/* columns */
.column { float: left; margin: 0 2em 0 0; }

/* filename with icon */
.file
{
	/* padding for the icon */
	padding-left: 20px;
	background-position: left center;
	background-repeat: no-repeat;
	/* horizontal space for the icon */
	padding-top: 2px;
	padding-bottom: 1px;
}

/* color preview */
.color
{
	width: 14px;
	height: 14px;
	border-width: 1px;
	border-style: solid;
}

#area-preview
{
	border-style: solid;
	border-width: 1px;
	min-height: 2em;
	padding: .5em;
}

div.indent
{
	margin-left: 1em;
}

div.field-block
{
	margin: 1em 0;
}

.text-ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
}

/***********************************************************/
/**************   Login MFA Form   **********************/
/***********************************************************/

#loginMfaForm #lblImageHint {
	font-weight:bold;
}

#loginMfaForm #lblUserMessage {
	float:left;
	margin-left:20px;
}

#loginMfaForm #userImage {
	float:left;
	max-width:200px;
	max-height:200px;
}

#loginMfaForm #question, #loginMfaForm #mfaInfo {
	clear:left;
	float:left;
	margin-top:1.0em;
}

#loginMfaForm #sendEmailButton {
	clear:left;
	float:left;
	margin-top:0.5em;
}

/***********************************************************/
/**************   ChangeExpiredPassword Form   *************/
/***********************************************************/
#changeExpiredPassword #currentImage{
	max-width:200px;
	max-height:200px;
}

/***********************************************************/
/**************   SetMfaInfo Form   *************/
/***********************************************************/
#mfaInfoForm #currentImage{
	max-width:200px;
	max-height:200px;
}

/***********************************************************/
/****************   Workflow export/import   ***************/
/***********************************************************/
.hide {
	display: none;
}
div.existing-workflow,
div.analysis-input {
	margin-top: 2em;
}

/***********************************************************/
/***************   Company/Identity provider  **************/
/***********************************************************/
/* display company identity provider hint next to label */
div.identityProviderHint
{
	display: inline;
}